<template>
  <div id="app">
    <SelectTree
      :props="props"
      :options="list"
      :isFilterable="isFilterable"
      :initialId="initialId"
      :clearable="isClearable"
      :accordion="isAccordion"
      @getValue="getValue($event)"
      :isLazy="isLazy"
      @loadStart="loadStart"
      @loadOther="loadOther"
      @search="search"
      @focus="focus"
    />
  </div>
</template>

<script>
import SelectTree from '@/components/SelectTree'
export default {
  name: 'App',
  components: { SelectTree },
  data: function () {
    return {
      Id: '',
      isClearable: true, // 是不是可以清空的 (可选)
      isAccordion: true, // 是否开启手风琴模式 (可选)
      initialId: '', // 是否给一个默认值 (可选) 唯一标识 类似 id
      isLazy: false, // 是否懒加载
      isFilterable: true, // 是否可以搜索
      props: {
        // 配置项（必选）
        value: 'id', // 指定你选择的时候选中的是哪个字段
        label: 'label', // 指定渲染的字段
        children: 'children' // 指定子选项
      },
      list: [
        {
          id: 1,
          label: '测试A',
          children: [{ id: 11, label: '测试A-1', children: [] }]
        },
        {
          id: 2,
          label: '测试B',
          children: [{ id: 22, label: '测试B-1', children: [] }]
        },
        {
          id: 3,
          label: '测试C',
          children: [{ id: 33, label: '测试C-1', children: [] }]
        },
        {
          id: 4,
          label: '测试D',
          children: [{ id: 44, label: '测试D-1', children: [] }]
        }
      ]
    }
  },
  methods: {
    // 获取值
    getValue (value) {
      // 这里可以拿到用选择的项的 Id
      this.Id = value
      console.log('用户选择项的ID:', this.Id)
    },
    // 加载第一个
    loadStart (node, resolve) {
      // 可以发起请求获取
      resolve([{ id: 1, label: '你好', children: [] }])
    },
    // 之后的加载
    loadOther (node, resolve) {
      // 可以发起请求获取
      resolve([{ id: 1, label: '你好', children: [] }])
    },
    search (searchStr) {
      // 可以发起请求获取 然后刷新树 这里可以判断 searchStr 是不是空 空的话就重新刷新数据
      if (searchStr) {
        this.list = [{ id: 1, label: '你好' }]
      } else {
        this.list = [{
          id: 1,
          label: '测试A',
          children: [{ id: 11, label: '测试A-1', children: [] }]
        },
        {
          id: 2,
          label: '测试B',
          children: [{ id: 22, label: '测试B-1', children: [] }]
        },
        {
          id: 3,
          label: '测试C',
          children: [{ id: 33, label: '测试C-1', children: [] }]
        },
        {
          id: 4,
          label: '测试D',
          children: [{ id: 44, label: '测试D-1', children: [] }]
        }]
      }
    },
    // 聚焦了 刷新数据 可以在别的时刻
    focus () {
      this.list = [{
        id: 1,
        label: '测试A',
        children: [{ id: 11, label: '测试A-1', children: [] }]
      },
      {
        id: 2,
        label: '测试B',
        children: [{ id: 22, label: '测试B-1', children: [] }]
      },
      {
        id: 3,
        label: '测试C',
        children: [{ id: 33, label: '测试C-1', children: [] }]
      },
      {
        id: 4,
        label: '测试D',
        children: [{ id: 44, label: '测试D-1', children: [] }]
      }]
    }
  }
}
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
